<template>
  <div class="box ordersetting">
    <el-card class="box-card">
      <el-row>
        <el-col :span="22">
          <div>
            <el-button
                    style="margin-left: -1000px; height: 40px; width: 100px"
                    type="primary"
                    @click="downloadTemplate()"
            >模板下载</el-button
            >
          </div>
          <div style="margin-top: -30px; margin-left: -160%">
            <el-upload
                    :action="action"
                    name="excelFile"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :before-upload="beforeUpload"
            >
              <el-button
                      style="
                  margin-right: -1050px;
                  margin-top: -20px;
                  height: 40px;
                  width: 100px;
                "
                      type="primary"
              >上传文件</el-button
              >
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div style="margin-left: -30%; margin-top: 10px">
            操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="calendar">
      <!-- 年份 月份 -->
      <div class="month">
        <div style="margin-left: -90%">
          <span class="choose-year">{{ currentYear }}年</span>
          <span class="choose-month">{{ currentMonth }}月</span>
        </div>
        <div
                style="margin-top: -50px; margin-bottom: 5px; margin-right: -950px"
        >
          <el-button
                  @click="goCurrentMonth(currentYear, currentMonth)"
                  class="gotoday"
          >今天</el-button
          >
          <el-button @click="pickPre(currentYear, currentMonth)"
          >上个月</el-button
          >
          <el-button @click="pickNext(currentYear, currentMonth)"
          >下个月</el-button
          >
        </div>
        <div class="clearfix"></div>
      </div>
      <!-- 星期 -->
      <div class="caldate">
        <ul class="weekdays">
          <li>周一</li>
          <li>周二</li>
          <li>周三</li>
          <li>周四</li>
          <li>周五</li>
          <li>周六</li>
          <li>周日</li>
        </ul>
        <!-- 日期 -->
        <ul class="days">
          <!-- v-for循环 每一次循环用<li>标签创建一天 -->
          <li v-for="dayobject in days">
            <template>
              <!-- 非当前月份 -->
              <div
                      class="other-month"
                      v-if="dayobject.day.getMonth() + 1 !== currentMonth"
              >
                {{ dayobject.day.getDate() }}
              </div>
              <!-- 当前月 -->
              <div
                      class="everyday"
                      v-if="dayobject.day.getMonth() + 1 === currentMonth"
              >
                <span class="datenumber">{{ dayobject.day.getDate() }}</span>
                <template>
                  <template v-for="obj in leftobj">
                    <template v-if="obj.date === dayobject.day.getDate()">
                      <!-- 未满 -->
                      <template v-if="obj.number > obj.reservations">
                        <div class="usual">
                          <p>可预约{{ obj.number }}人</p>
                          <p>已预约{{ obj.reservations }}人</p>
                        </div>
                      </template>
                      <!-- 满人 -->
                      <template v-else>
                        <div class="fulled">
                          <p>可预约{{ obj.number }}人</p>
                          <p>已预约{{ obj.reservations }}人</p>
                          <p>已满</p>
                        </div>
                      </template>
                    </template>
                  </template>
                  <!-- 给未来日期添加设置按钮 -->
                  <button
                          v-if="dayobject.day > today"
                          @click="handleOrderSet(dayobject.day)"
                          class="orderbtn"
                  >
                    设置
                  </button>
                </template>
              </div>
            </template>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        today: new Date(), //当前日期
        currentDay: 1,
        currentMonth: 1,
        LocalMonth: 1,
        currentYear: 1970,
        currentWeek: 1,
        days: [],
        leftobj: [], //用于装载页面显示的月份已经进行预约设置的数据
        action: "/orderSetting/upload",
        headers: {
          Authorization: sessionStorage.getItem("token"),
        },
      };
    },
    created() {
      //在vue初始化时调用
      this.initData(null);
    },
    methods: {
      //预约设置
      handleOrderSet(day) {
        //alert(this.formatDate(day.getFullYear(),day.getMonth()+1, day.getDate()));
        this.$prompt("请输入可预约人数", "预约设置", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^[0-9]*[1-9][0-9]*$/,
          inputErrorMessage: "只能输入正整数",
        })
                .then(({ value }) => {
                  this.$ajax
                          .post("/orderSetting/editNumberByDate", {
                            number: value, // 人数
                            orderDate: this.formatDate(
                                    day.getFullYear(),
                                    day.getMonth() + 1,
                                    day.getDate()
                            ), // 格式化后的 日期
                          })
                          .then((res) => {
                            if (res.data.flag) {
                              this.initData(
                                      this.formatDate(day.getFullYear(), day.getMonth() + 1, 1)
                              );
                              this.$message.success(res.data.message);
                            } else {
                              this.$message.error(res.data.message);
                            }
                          });
                })
                .catch(() => {
                  this.$message({
                    type: "info",
                    message: "已取消",
                  });
                });
      },
      //上传之前进行文件格式校验
      beforeUpload(file) {
        const isXLS = file.type === "application/vnd.ms-excel";
        if (isXLS) {
          return true;
        }
        const isXLSX =
                file.type ===
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        if (isXLSX) {
          return true;
        }
        this.$message.error("上传文件只能是xls或者xlsx格式!");
        return false;
      },
      //下载模板文件
      downloadTemplate() {
        window.location.href = "/ordersetting_template.xlsx";
      },
      //上传成功提示
      handleSuccess(response, file) {
        if (response.flag) {
          this.$message({
            message: response.message,
            type: "success",
          });
        } else {
          this.$message.error(response.message);
        }
        console.log(response, file, fileList);
      },
      //初始化当前页要展示的日期
      initData: function (cur) {
        let now;
        let dayobject;
        let d;
        let i;
        let date;
        let index = 0; //控制显示预定的天数
        if (cur) {
          date = new Date(cur);
        } else {
          const now = new Date();
          const d = new Date(
                  this.formatDate(now.getFullYear(), now.getMonth(), 1)
          );
          d.setDate(35);
          date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        }
        this.currentDay = date.getDate();
        this.currentYear = date.getFullYear();
        this.currentMonth = date.getMonth() + 1;
        this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
        const today = new Date();
        this.LocalMonth = today.getMonth() + 1;
        if (this.currentWeek === 0) {
          this.currentWeek = 7;
        }
        const str = this.formatDate(
                this.currentYear,
                this.currentMonth,
                this.currentDay
        );
        this.days.length = 0;
        // 今天是周日，放在第一行第7个位置，前面6个
        //初始化本周
        for (i = this.currentWeek - 1; i >= 0; i--) {
          d = new Date(str);
          d.setDate(d.getDate() - i);
          dayobject = {};
          dayobject.day = d;
          now = new Date();
          if (
                  d.getDate() === now.getDate() &&
                  d.getMonth() === now.getMonth() &&
                  d.getFullYear() === now.getFullYear()
          ) {
            dayobject.index = index++; //从今天开始显示供预定的数量
          } else if (index !== 0 && index < 3) dayobject.index = index++; //从今天开始3天内显示供预定的数量
          this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
        }
        //其他周
        for (i = 1; i <= 35 - this.currentWeek; i++) {
          d = new Date(str);
          d.setDate(d.getDate() + i);
          dayobject = {}; //dayobject   {day:date,index:2}
          dayobject.day = d;
          now = new Date();
          if (
                  d.getDate() === now.getDate() &&
                  d.getMonth() === now.getMonth() &&
                  d.getFullYear() === now.getFullYear()
          ) {
            dayobject.index = index++;
          } else if (index !== 0 && index < 3) dayobject.index = index++;
          this.days.push(dayobject);
        }
        // 静态数据测试
        // this.leftobj = [
        //     { date: 1, number: 120, reservations: 1 },
        //     { date: 3, number: 120, reservations: 1 },
        //     { date: 4, number: 120, reservations: 120 },
        //     { date: 6, number: 120, reservations: 1 },
        //     { date: 8, number: 120, reservations: 1 }
        // ];

        // 根据当前页的月份查询数据,赋值给leftobj模型展示数据
        this.$ajax
                .post(
                        "/orderSetting/getOrderSettingByMonth?date=" +
                        this.currentYear +
                        "-" +
                        this.currentMonth
                )
                .then((res) => {
                  if (res.data.flag) {
                    this.leftobj = res.data.data;
                  } else {
                    this.$message.error(res.data.message);
                  }
                });
      },

      //切换到当前月份
      goCurrentMonth: function (year, month) {
        const d = new Date();
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      },
      //向前一个月
      pickPre: function (year, month) {
        // setDate(0); 上月最后一天
        // setDate(-1); 上月倒数第二天
        // setDate(dx) 参数dx为 上月最后一天的前后dx天
        const d = new Date(this.formatDate(year, month, 1));
        d.setDate(0);
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      },
      //向后一个月
      pickNext: function (year, month) {
        const d = new Date(this.formatDate(year, month, 1));
        d.setDate(35); ////获取指定天之后的日期
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      },
      // 返回 类似 2021-01-02 格式的字符串
      formatDate: function (year, month, day) {
        const y = year;
        let m = month;
        if (m < 10) m = "0" + m;
        let d = day;
        if (d < 10) d = "0" + d;
        return y + "-" + m + "-" + d;
      },
    },
  };
</script>

<style scoped>
  .ordersetting .el-input__inner {
    height: 36px;
    line-height: 36px;
  }
  .ordersetting {
    background: #f5f5f5;
    box-shadow: none;
    border-top: none;
  }
  .gotoday {
    border: 1px solid #d5d9df;
  }
  .calendar p {
    margin: 0;
  }
  .filebtn {
    padding: 9px 20px;
    border: none;
    font-size: 18px;
    background: #0ebffc;
  }
  .month {
    width: 100%;
    line-height: 3;
    /* background: #00B8EC; */
  }

  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
  }

  .year-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .year-month:hover {
    background: rgba(150, 2, 12, 0.1);
  }

  .choose-year {
    padding-left: 20px;
    font-size: 1.2rem;
  }

  .choose-month {
    text-align: center;
    font-size: 1.2rem;
  }

  .arrow {
    padding: 30px;
  }

  .arrow:hover {
    background: rgba(100, 2, 12, 0.1);
  }

  .month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  .caldate {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  .weekdays {
    margin: 0;
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    color: #333;
    justify-content: space-around;
    border-bottom: 1px solid #ededed;
    border-top: 2px solid #0ebffc;
  }

  .weekdays li {
    display: inline-block;
    width: 14%;
    text-align: center;
    padding: 10px 0;
    border-right: 1px solid #f1efef;
    color: #000;
    font-size: 20px;
  }

  .days {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .days li {
    height: 160px;
    list-style-type: none;
    display: inline-block;
    width: 14%;
    text-align: right;
    font-size: 1rem;
    color: #000;
    border-bottom: 1px solid #fff;
  }
  .everyday {
    height: 160px;
    border-bottom: 1px solid #f1efefef;
    position: relative;
    background: #fff;
  }
  .everyday .datenumber {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .everyday .usual {
    height: 100%;
    background: #1ed7fc;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
    line-height: 1.5;
  }
  .everyday .fulled {
    height: 100%;
    background: #ff9c9d;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
  }
  .everyday .nochoose {
    height: 100%;
    background: #effbff;
  }
  .everyday .orderbtn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    border: none;
    background: #d6ffff;
    padding: 3px 10px;
    color: #0ebffc;
    border-radius: 4px;
    font-size: 16px;
  }
  .days li .active {
    padding: 6px 10px;
    border-radius: 50%;
    background: #00b8ec;
    color: #fff;
  }

  .days li .other-month {
    padding: 10px;
    height: 140px;
    color: gainsboro;
    background: #f9f9f9;
  }
</style>
